Skip to content

feat(Chat): improved styling/readability of markdown tables #1973

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 16, 2025

Conversation

cpsievert
Copy link
Collaborator

Closes #1972. For a minimal example:

from shiny.express import ui

chat = ui.Chat(
    id="chat",
    messages=[
        """
Hi! Here's a markdown table:

| Left-aligned | Center-aligned | Right-aligned | Default |
|:-------------|:-------------:|-------------:|---------|
| Text         | Text          | Text         | Text    |
| Longer text example | Centered | $123.45 | No alignment specified |
| *Italic*     | **Bold**      | `code`       | [Link](https://example.com) |
| Row with fewer cells |  |  |  |
| Mixed | Content | With | Different lengths |
""",
    ],
)
chat.ui()

Before

Screenshot 2025-04-14 at 10 55 40 AM

After

Screenshot 2025-04-14 at 10 55 09 AM

@cpsievert cpsievert force-pushed the chat-markdown-tables branch from c07cf7a to af84e64 Compare April 14, 2025 15:57
@cpsievert cpsievert requested review from Copilot and gadenbuie April 15, 2025 22:12
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR improves the styling and readability of markdown tables rendered in the chat UI, as well as updates the dependency version for pyright.

  • Updated the pyproject.toml file to pin the pyright dependency to a specific version.
  • Enhanced the markdown stream renderer to add Bootstrap styling to tables.
  • Updated the CHANGELOG.md to document the improvements.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

File Description
pyproject.toml Changed pyright dependency version to a fixed version.
js/markdown-stream/markdown-stream.ts Introduced a new markdown renderer with Bootstrap table styling and updated the HTML escaping renderer.
CHANGELOG.md Added release notes for the markdown table styling improvements.
Comments suppressed due to low confidence (1)

js/markdown-stream/markdown-stream.ts:53

  • The template literal for the table HTML includes extra indentation and newline characters, which may inadvertently render additional whitespace. Consider reformatting the string to minimize unnecessary whitespace, for example by placing the entire HTML structure on one line or carefully managing indentation.
return `<table class="table table-striped table-bordered">

@cpsievert cpsievert merged commit 4d7a3f5 into main Apr 16, 2025
54 checks passed
@cpsievert cpsievert deleted the chat-markdown-tables branch April 16, 2025 17:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tables Not Rendered Properly in Chat UI – No Gaps or Lines Between Columns/Rows
2 participants